.ui-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0;

  ul.ui-tabs-nav {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0px 0 0;
    padding: 0 0px;
    list-style: none;
    border-bottom: 1px solid rgba(199, 167, 123, .4);
    background: rgba(230, 226, 215, 0.9);
    height: 30px;

    li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin: 0 -1px -1px -0;
      max-width: 200px;
      padding: 3px 5px;
      border: 1px solid rgba(199, 167, 123, 0.15);
      border-top: 0;
      cursor: pointer;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 14px;
      color: #666666;

      span {
        margin: 0 6px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        -ms-flex-preferred-size: 20px;
        flex-basis: 20px;
        width: 20px;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        white-space: nowrap;
        text-align: left;
      }

      &.active {
        font-weight: bold;
        background: rgba(243, 241, 236, 1);
        border-bottom: 0;
        -webkit-transition: none;
        transition: none;
        border-top: 2px solid rgba(199, 167, 123, .7);
        border-left: 1px solid rgba(199, 167, 123, .4);
        border-right: 1px solid rgba(199, 167, 123, .4);
        color: #333333;
        height: 30px;
        box-shadow: 0 -3px 8px rgba(199, 167, 123, .25);
        border-bottom-width: 0;
      }

      &:hover {
        background: #EFECE5;
        transition: background 0.4s;
      }
    }
  }

  .ui-tabs-container {
    position: relative; // 解决滚动条在内容下方的问题
    flex-grow: 1;
    overflow: auto;

    > div {
      overflow: hidden;
    }
  }
}

//关闭按钮
.ui-tabs-close-icon {

  position: relative;
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  vertical-align: middle;

  &:before, &:after {
    content: "";
    position: absolute;
    top: 7px;
    left: 2px;
    width: 11px;
    height: 1px;
    border-radius: 1px;
    background: #777;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    transform: rotate(-45deg);
  }

  &:hover {
    background: red;
  }

  &:hover:after, &:hover:before {
    background: #fff;
  }
}


//刷新图标
.ui-tabs-refresh-icon{
  display: inline-block;
  height: 15px;
  width: 15px;
  margin-right:5px;
  background:url("");
  background-position:center;
  background-repeat: no-repeat;
}




//正在加载图标
.ui-tabs-loading-icon {
  display: inline-block;
  height: 15px;
  width: 15px;
  border: 3px solid #5677fc;
  border-right: 3px solid transparent;
  border-radius: 50%;
  box-sizing: border-box;
  vertical-align: middle;
  animation: rotate-animate 1.5s infinite;

  @keyframes rotate-animate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}